<template>
  <div class="date-range">
    <el-date-picker size="small" :value="dateRange" type="daterange" placeholder="选择日期" :clearable="false" :picker-options="{ shortcuts, disabledDate }" value-format="yyyy-MM-dd" v-bind="$attrs" @input="dateChange" v-on="$listeners">
    </el-date-picker>
    <ul class="date-types">
      <li class="date-type" :class="{active: dateType === item.value}" v-for="item in dateTypeOpts" :key="item.value" @click="dateTypeChange(item)">{{item.label}}</li>
    </ul>
  </div>
</template>

<script type="text/javascript">
import { DATE_TYPE } from '../constant'
export default {
  name: 'DateRange',
  components: {

  },
  props: {
    dateRange: {
      type: Array,
      required: true
    },
    dateType: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      dateTypeOpts: [
        {
          value: DATE_TYPE.DAY,
          label: '日'
        },
        {
          value: DATE_TYPE.WEEK,
          label: '周'
        },
        {
          value: DATE_TYPE.MONTH,
          label: '月'
        }
      ],
      disabledDate (time) {
        return time.getTime() > new Date().setHours(0, 0, 0, 0)
      }
    }
  },
  methods: {
    dateChange (val) {
      this.$emit('update:dateRange', val)
    },
    dateTypeChange ({ value }) {
      if (value === this.dateType) return
      this.$emit('update:dateType', value)
      this.$emit('dateTypeChange', this.dateRange)
    }
  },
  computed: {
    shortcuts () {
      const { dateType } = this
      let arr = []
      switch (dateType) {
        case DATE_TYPE.DAY:
          arr = [{
            text: '过去3日',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 3)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去8日',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 8)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去15日',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 15)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去30日',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 30)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }]
          break
        case DATE_TYPE.WEEK:
          arr = [{
            text: '过去2周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 7 * 2)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去8周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 7 * 8)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去16周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 7 * 16)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去32周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 7 * 32)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }]
          break
        case DATE_TYPE.MONTH:
          arr = [{
            text: '过去3月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 30 * 3)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去6月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 30 * 6)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去9月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 30 * 9)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去12月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setDate(start.getDate() - 30 * 12)
              end.setDate(end.getDate() - 1)
              picker.$emit('pick', [start, end])
            }
          }]
          break
      }
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
.date-range {
  .date-types {
    display: inline-flex;
    margin-left: 16px;
    border-radius: 2px;
    transition: all 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.1);
    .date-type {
      padding: 4px 14px;
      text-align: center;
      cursor: pointer;
      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }
      &.active {
        color: #fff;
        background-color: #4aa6fc;
      }
    }
  }
}
</style>
